<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>base component</title>
</head>

<body>
    <div id="app">
        <my-button></my-button>
        <my-button></my-button>
        <my-button></my-button>
    </div>
    <script src="../assets/vue2.js"></script>
    <script>
        // 组件的名称最好是这种中划线的方式Vue（开头大写）
        Vue.component('my-button', {
            data() {
                return {
                    count: 0 // 这个变量和该组件强关联，定义在组件里面比较合适
                }
            },
            // template里面的模板最外面用个单独的div比较好
            template: `
            <div>
                {{count}}
                <button @click="count++">点我+1</button>
            </div>
            `
        }
        );

        // 组件定义后再实例化，如果在前面实例化，页面会不正常
        const app = new Vue({ el: '#app' });
    </script>
</body>

</html>